<form nz-form [formGroup]="validateForm">
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="oldPassword">原密码</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="combineTpl">
      <input nz-input formControlName="oldPassword" id="oldPassword" placeholder="原密码" />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="newPassword">新密码</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="combineTpl">
      <nz-input-group [nzSuffix]="suffixTemplate1">
        <input nz-input [type]="passwordVisible ? 'text' : 'password'" (ngModelChange)="updateConfirmValidator()" formControlName="newPassword" id="newPassword" placeholder="新密码" />
      </nz-input-group>
      <password-strength-meter [password]="newPassword"></password-strength-meter>
      <ng-template #suffixTemplate1>
        <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="sureNewPassword">确认新密码</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="combineTpl">
      <nz-input-group [nzSuffix]="suffixTemplate">
        <input nz-input [type]="compirePasswordVisible ? 'text' : 'password'" formControlName="sureNewPassword" id="sureNewPassword" placeholder="确认新密码" />
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i nz-icon [nzType]="compirePasswordVisible ? 'eye-invisible' : 'eye'" (click)="compirePasswordVisible = !compirePasswordVisible"></i>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
</form>
<ng-template #combineTpl let-control>
  <ng-container *ngIf="control.hasError('message')">{{ control.errors.message }}</ng-container>
  <ng-container *ngIf="control.hasError('required')">必填项</ng-container>
</ng-template>
